page {
    background-color: #F5F5F5;
    // padding-top: 8vw;
}

.giftListTop {
    width: 100%;
    height: 8vw;
    .scroll-header {
        height: 8vw;
        background-color: #FF322B;
        white-space: nowrap;
        .category {
            display: inline-block;
            margin-left: 0;
            // width: 15vw;
            padding: 0 3vw;
            text-align: center;
            color: #ffffff;
            font-size: 3.6vw;
            line-height: 6vw;
            border-radius: 6vw;
        }
        .category:first-of-type {
            margin-left: 3vw;
        }
        .bg {
            background-color: rgba(255, 255, 255, .5);
        }
    }
}

.b {
    font-size: 2.6vw;
    display: inline-block;
}

.em {
    font-size: 2.6vw;
    display: inline-block;
    color: #FD8E4A;
    float: right;
    margin-top: 0.3vw;
}

.health_list {
    .detail {
        background-color: #FF322B;
        height: 100vh;
        overflow: hidden;
        &.height {
            height: calc(~'100vh - 8vw');
        }
        .detail_in {
            height: inherit;
            overflow: auto;
            box-sizing: border-box;
            background-color: #F5F5F5;
            padding: 3vw;
            border-top-left-radius: 5vw;
            border-top-right-radius: 5vw;
            &.good_off{
                background-image:url('http://resource.160nurse.com/canvas/healthy/img/common/tb_54.png');
                background-position:center top 20vh;
                background-repeat:no-repeat;
                background-size:30vw;
            }
            .goods {
                margin-right: 2vw;
                float: left;
                overflow: hidden;
                border-radius: 2vw;
                background-color: #fff;
                width: 46vw;
                position: relative;
                &.off,
                &.off2 {
                    &:after {
                        display: block;
                        content: '助力结束';
                        color: #fff;
                        background-color: rgba(0, 0, 0, 0.5);
                        background-size: 60%;
                        background-image: url('http://resource.160nurse.com/canvas/healthy/img/common/xian_1.png');
                        background-repeat: no-repeat;
                        background-position: center center;
                        z-index: 4;
                        width: 16vw;
                        height: 16vw;
                        line-height: 6vw;
                        text-align: center;
                        box-sizing: border-box;
                        padding: 2vw 3vw;
                        font-size: 3.6vw;
                        left: 15vw;
                        top: 15vw;
                        border-radius: 50%;
                        position: absolute;
                    }
                    &:before {
                        content: '';
                        height: 46vw;
                        width: 46vw;
                        background: rgba(255, 255, 255, 0.4);
                        position: absolute;
                        z-index: 2;
                        top: 0;
                        left: 0;
                    }
                }
                &.off2 {
                    &:after {
                        content: '正在补货';
                    }
                }
                image {
                    width: 45.9vw;
                    height: 45.9vw;
                    display: block;
                }
                .details {
                    padding: 2vw 3vw 0 3vw;
                    height: 20vw;
                    .name {
                        font-size: 3.6vw;
                        width: 40vw;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                    }
                    .help {
                        font-size: 3vw;
                        color: #999999;
                        margin: 1vw 0;
                        overflow: hidden;
                    }
                    .icon {
                        font-size: 3.6vw;
                        color: #FFA229;
                        margin-top: 2vw;
                    }
                    .range {
                        width: 98%;
                        height: 2vw;
                        background-color: #F5F5F5;
                        margin: 3vw auto;
                        border-radius: 2vw;
                        .range_in {
                            width: 50%;
                            height: 2vw;
                            border-radius: 2vw;
                            background-color: #FFA229;
                        }
                    }
                    .helpBtn {
                        margin-top: 2vw;
                        background: linear-gradient(to right, #FFB937, #FD8E4A);
                        font-size: 3vw;
                        text-align: center;
                        line-height: 6vw;
                        width: 18vw;
                        color: #fff;
                        // padding: 1vw 4vw;
                        border-radius: 6vw;
                        &.off {
                            background: #eee;
                            color: #666;
                        }
                    }
                }
            }
            .goods:nth-child(2n) {
                margin-right: 0;
                margin-bottom: 2vw;
            }
        }
    }
}